/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import {ConfigProvider, Field, Form, Input, Loading, Pagination, Table} from '@alifd/next';
import RegionGroup from 'components/RegionGroup';
import {aliwareIntl, getParams, request, setParams} from '@/globalLib';

import './index.scss';

@ConfigProvider.config
class HistoryRollback extends React.Component {
    static displayName = 'HistoryRollback';

    static propTypes = {
        locale: PropTypes.object,
        history: PropTypes.object,
    };

    constructor(props) {
        super(props);

        this.field = new Field(this);
        this.appName = getParams('appName') || '';
        this.preAppName = this.appName;
        this.group = getParams('group') || '';
        this.preGroup = this.group;

        this.dataId = getParams('dataId') || '';
        this.preDataId = this.dataId;
        this.serverId = getParams('serverId') || '';
        this.state = {
            value: '',
            visible: false,
            total: 0,
            pageSize: 10,
            currentPage: 1,
            dataSource: [],
            fieldValue: [],
            showAppName: false,
            showgroup: false,
            dataId: this.dataId,
            group: this.group,
            appName: this.appName,
            selectValue: [],
            loading: false,
        };
        const obj = {
            dataId: this.dataId || '',
            group: this.preGroup || '',
            appName: this.appName || '',
            serverId: this.serverId || '',
        };
        setParams(obj);
    }

    componentDidMount() {
        this.field.setValue('group', this.group);
        this.field.setValue('dataId', this.dataId);
        // this.getData()
    }

    openLoading() {
        this.setState({
            loading: true,
        });
    }

    closeLoading() {
        this.setState({
            loading: false,
        });
    }

    /**
     * 回车事件
     */
    keyDownSearch(e) {
        const theEvent = e || window.event;
        const code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code === 13) {
            this.getData();
            return false;
        }
        return true;
    }

    UNSAFE_componentWillMount() {
        window.addEventListener('keydown', this.keyDownSearch.bind(this), false);
    }

    componentWillUnmount() {
        window.removeEventListener('keydown', this.keyDownSearch.bind(this));
    }

    onSearch() {
    }

    onChange() {
    }

    cleanAndGetData(needclean = false) {
        if (needclean) {
            this.dataId = '';
            this.group = '';
            this.setState({
                group: '',
                dataId: '',
            });
            setParams({
                group: '',
                dataId: '',
            });
        }

        this.getData();
    }

    getData(pageNo = 1) {
        const self = this;
        this.serverId = getParams('serverId') || '';
        if (!this.dataId) return false;
        request({
            beforeSend() {
                self.openLoading();
            },
            url: `v1/cs/history?search=accurate&dataId=${this.dataId}&group=${
                this.group
            }&&pageNo=${pageNo}&pageSize=${this.state.pageSize}`,
            success(data) {
                if (data != null) {
                    self.setState({
                        dataSource: data.pageItems || [],
                        total: data.totalCount,
                        currentPage: data.pageNumber,
                    });
                }
            },
            complete() {
                self.closeLoading();
            },
        });
    }

    showMore() {
    }

    renderCol(value, index, record) {
        const {locale = {}} = this.props;
        return (
            < div >
            < a
        onClick = {this.goDetail.bind(this, record)}
        style = {
        {
            marginRight: 5
        }
    }>
        {
            locale.details
        }
    <
        /a>
        < span
        style = {
        {
            marginRight: 5
        }
    }>|<
        /span>
        < a
        style = {
        {
            marginRight: 5
        }
    }
        onClick = {this.goRollBack.bind(this, record)} >
            {locale.rollback}
            < /a>
            < /div>
    )
        ;
    }

    changePage(value) {
        this.setState({
            currentPage: value,
        });
        this.getData(value);
    }

    onInputUpdate() {
    }

    chooseFieldChange(fieldValue) {
        this.setState({
            fieldValue,
        });
    }

    showSelect(value) {
        this.setState({
            selectValue: value,
        });
        if (value.indexOf('appName') !== -1) {
            this.setState({
                showAppName: true,
            });
        } else {
            this.setState({
                showAppName: false,
            });
        }
        if (value.indexOf('group') !== -1) {
            this.setState({
                showgroup: true,
            });
        } else {
            this.setState({
                showgroup: false,
            });
        }
        this.chooseFieldChange(value);
    }

    getAppName(value) {
        this.appName = value;
        this.setState({
            appName: value,
        });
    }

    getDataId(value) {
        this.dataId = value;
        this.setState({
            dataId: value,
        });
    }

    getGroup(value) {
        this.group = value;
        this.setState({
            group: value,
        });
    }

    selectAll() {
        this.dataId = this.field.getValue('dataId');
        this.group = this.field.getValue('group');
        if (!this.dataId || !this.group) {
            return false;
        }
        if (this.dataId !== this.preDataId) {
            setParams('dataId', this.dataId);
            this.preDataId = this.dataId;
        }
        if (this.group !== this.preGroup) {
            setParams('group', this.preGroup);
            this.preGroup = this.group;
        }
        this.getData();
    }

    resetAll() {
        this.dataId = '';
        this.group = '';
        this.setState({
            selectValue: [],
            dataId: '',
            appName: '',
            group: '',
            showAppName: false,
            showgroup: false,
        });
        setParams({
            group: '',
            dataId: '',
        });
    }

    chooseEnv(value) {
    }

    renderLastTime(value, index, record) {
        return aliwareIntl.intlTimeFormat(record.lastModifiedTime);
    }

    goDetail(record) {
        this.serverId = getParams('serverId') || 'center';
        this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
        this.props.history.push(
            `/historyDetail?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${
                record.group
            }&nid=${record.id}&namespace=${this.tenant}`
        );
    }

    goRollBack(record) {
        this.serverId = getParams('serverId') || 'center';
        this.tenant = getParams('namespace') || ''; // 为当前实例保存tenant参数
        this.props.history.push(
            `/configRollback?serverId=${this.serverId || ''}&dataId=${record.dataId}&group=${
                record.group
            }&nid=${record.id}&namespace=${this.tenant}&nid=${record.id}`
        );
    }

    render() {
        const {locale = {}} = this.props;
        const {init} = this.field;
        this.init = init;
        return (
            < div
        style = {
        {
            padding: 10
        }
    }>
    <
        Loading
        shape = "flower"
        style = {
        {
            position: 'relative', width
        :
            '100%'
        }
    }
        visible = {this.state.loading}
        tip = "Loading..."
        color = "#333"
            >
            < RegionGroup
        left = {locale.toConfigure}
        namespaceCallBack = {this.cleanAndGetData.bind(this)}
        />
        < div >
        < Form
        inline
        field = {this.field} >
            < Form.Item
        label = "Data ID:"
        required >
        < Input
        placeholder = {locale.dataId}
        style = {
        {
            width: 200
        }
    }
        {...
            this.init('dataId', {
                rules: [
                    {
                        required: true,
                        message: locale.dataIdCanNotBeEmpty,
                    },
                ],
            })
        }
        />
        < /Form.Item>
        < Form.Item
        label = "Group:"
        required >
        < Input
        placeholder = {locale.group}
        style = {
        {
            width: 200
        }
    }
        {...
            this.init('group', {
                rules: [
                    {
                        required: true,
                        message: locale.groupCanNotBeEmpty,
                    },
                ],
            })
        }
        />
        < /Form.Item>

        < Form.Item
        label = "" >
            < Form.Submit
        validate
        type = "primary"
        onClick = {this.selectAll.bind(this)}
        style = {
        {
            marginRight: 10
        }
    }
    >
        {
            locale.query
        }
    <
        /Form.Submit>
        < /Form.Item>
        < /Form>
        < /div>
        < div
        style = {
        {
            position: 'relative', width
        :
            '100%', overflow
        :
            'hidden', height
        :
            '40px'
        }
    }>
    <
        h3
        style = {
        {
            height: 30,
                width
        :
            '100%',
                lineHeight
        :
            '30px',
                padding
        :
            0,
                margin
        :
            0,
                paddingLeft
        :
            10,
                borderLeft
        :
            '3px solid #09c',
                fontSize
        :
            16,
        }
    }
    >
        {
            locale.queryResult
        }
    <
        strong
        style = {
        {
            fontWeight: 'bold'
        }
    }>
        {
            this.state.total
        }
    <
        /strong>
        {
            locale.articleMeet
        }
    <
        /h3>
        < /div>
        < div >
        < Table
        dataSource = {this.state.dataSource}
        locale = {
        {
            empty: locale.pubNoData
        }
    }>
    <
        Table.Column
        title = "Data ID"
        dataIndex = "dataId" / >
            < Table.Column
        title = "Group"
        dataIndex = "group" / >
            < Table.Column
        title = {locale.lastUpdateTime}
        dataIndex = "time"
        cell = {this.renderLastTime.bind(this)}
        />
        < Table.Column
        title = {locale.operation}
        cell = {this.renderCol.bind(this)}
        />
        < /Table>
        < /div>
        < div
        style = {
        {
            marginTop: 10, textAlign
        :
            'right'
        }
    }>
    <
        Pagination
        current = {this.state.currentPage}
        total = {this.state.total}
        pageSize = {this.state.pageSize}
        onChange = {this.changePage.bind(this)}
        />
            ,
    <
        /div>
        < /Loading>
        < /div>
    )
        ;
    }
}

export default HistoryRollback;
